<template>
  <div class="app-container page_scroll">
    <!-- <QueryForm v-model="form" @search="getChannelList" /> -->
    <ChannelTable v-model="form" :list="channelList" @search="onSearch" />
    <!-- <BasePagination
      v-model="page.page"
      :total="totalCount"
      @change="pageOnChange"
    /> -->

    <!-- 统计 开始 -->
    <!-- <div class="static_box">
      <div class="chart_wrap" v-for="(item,index) in contrastList" :key="index">
        <div class="chart_title">{{`渠道(${item.name})比较`}}</div>
        <div class="chart_cell">
          <div class="chart_box" :id="`chart_${index}`"></div>
        </div>
      </div>
    </div> -->
    <!-- 统计 end -->

  </div>
</template>

<script>
import * as echarts from "echarts";
import QueryForm from "./_components/QueryForm.vue";
import ChannelTable from "./_components/ChannelTable.vue";
import { getChannelList, getChannelReportList } from "@/api/channel/index";
import { GET_CUSTOMER_LABEL, GET_CHANNEL_LABEL_CONTRAST,GET_STAR_LABEL_PAGE,GET_STAR_REPORT_PAGE } from "@/http/static";
export default {
  name: "ChannelManage",
  components: { QueryForm, ChannelTable },
  data() {
    return {
      form: {},
      page: {
        page: 1,
        size: 100,
      },
      totalCount: 0,
      channelList: [],
      contrastList: [],
      
    };
  },
  created() {
   
  },
  mounted() {
    console.log(this.form)
    this.getList();
    this.getLabel();
  },
  methods: {
    async getList() {
      this.showAppLoading();

      let oParams = JSON.parse(JSON.stringify(this.form));
      if (oParams.time && oParams.time.length > 0) {
        oParams.startDate = oParams.time[0];
        oParams.endDate = oParams.time[1];
      }

      delete oParams.time;
      const res = await GET_STAR_REPORT_PAGE(oParams);
      this.hideAppLoading();
      //if (!res.result) return;
      this.channelList = res.data;
    },

    // 获取星级统计
    getLabel() {
      let _this = this;
      let oParams = JSON.parse(JSON.stringify(this.form));
      if (oParams.time && oParams.time.length > 0) {
        oParams.startDate = oParams.time[0];
        oParams.endDate = oParams.time[1];
      }

      delete oParams.time;
      GET_CHANNEL_LABEL_CONTRAST(oParams).then((res) => {
        let list = res.data || [];
        this.contrastList = list;
        setTimeout(function () {
          _this.createChart(list);
        }, 1500);
      });
    },

    // 循环生成图表
    createChart(list) {
      if (!list || list.length <= 0) {
        return false;
      }

      for (let i = 0, len = list.length; i < len; i++) {
        let k = list[i];
        let clist = k.channelList || [];
        clist.map((j) => {
          j.value = j.levelCount;
          j.name = j.nickname;
          return j;
        });

        let option = this.getChart(k.channelList);
        var chartDom = document.getElementById(`chart_${i}`);
        var myChart = echarts.init(chartDom);
        myChart.setOption(option);
      }
    },

    // 获取图表数据结构
    getChart(data) {
      let option = {
        toolbox: {
          show: true,
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [10, 120],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            label: {
              show: true,
              formatter: (params) => {
                console.log(params);
                return `${params.data.name}(${params.data.levelCount})${params.data.rate}%`;
              },
            },
            data: data,
          },
        ],
      };
      return option;
    },

    // 搜索
    onSearch(){
      this.getList()
      //this.getLabel()
    },

   

  },
};
</script>
<style lang="scss" scoped>
.static_box {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0;
  .chart_wrap {
    flex: 0 0 33%;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    margin: 0 0 20px 0;
    .chart_cell {
      width: 100%;
      height: 400px;
      margin: 0 auto;
      padding:0 40px;
      .chart_box {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
